﻿
@{
    ViewBag.Title = "HomeIndex";
    Layout = "~/Views/SharedHead/Top-Header.cshtml";
}
@section Styles{
    <link rel="stylesheet" href="~/css/TY-Header.css">
    <link rel="stylesheet" href="~/css/Home.css">
    <link rel="stylesheet" href="~/iconfont/iconfont.css">
    <link rel="stylesheet" href="~/css/Home-Conten.css">
    <script src="~/js/jquery-3.6.4.min.js"></script>
    <style>
        ul li{
            list-style:none;
        }
        .Conten-LengHuanQu-Xinxi #XianXi #UpdataBtn{
            margin-top:20px;
            position:absolute;
            left:45%;
        }
    </style>
}
@section Scripts{
    <script src="~/js/Home-Top.js"></script>
    <script src="~/js/BeijingBianhua.js"></script>
    <script src="~/js/Home.js"></script>
    <script src="~/js/PingLunQu.js"></script>
    <script src="~/js/Top-frame.js"></script>
    <script src="~/js/ShiJian.js"></script>
}
<script type="text/javascript">
    //显示图片方法
    //$(function () {
    //    $("#file1").on("change", function () {
    //        var file = this.files[0];

    //        if (this.files && file) {
    //            var reader = new FileReader();
    //            reader.onload = function (e) {
    //                $("#picimg").attr('src', e.target.result);
    //            }
    //            reader.readAsDataURL(file);
    //        }
    //    });
    //})
    //显示图片和视频方法
    $(function () {
        //监听input的change事件
        $("#file1").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            if (objUrl) {

                $("#picimg").attr("src", objUrl);
                $("#spvieo").attr("src", objUrl);
            }
        });
        $("#fileimg").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            if (objUrl) {
                $("#Selimg").attr("src", objUrl);
            }
        });
        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {
                // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    })
    //清空
    function QingKong() {
        $('#shurukuang').val('');
        $('#picimg').attr('src', '');
        $('#spvieo').attr('src', '');
        $('#file1').val('');
    }
    //删除
    function Del(pid) {
        $.ajax({
            //访问路径
            url: "/Home/Del",
            //请求values控制器中的post方法
            type: "Post",
            //参数
            data: {"pid": pid },
            success: function (data) {
                alert("删除成功");
                window.location.reload();
            }
        })
    }

    //页面启动时触发
    $.ajaxSetup({ async: false });
    $(document).ready(function () {
        GRSelect();
        HaoYouFLSel();
        HaoYouQB();
        $("#UpdataBtn").click(Update);
    })
    //显示个人信息
    function GRSelect() {
        var id = $("#gerenWBID").text();
        $.post("/Home/grSelect", { id: id }, function (data) {
            //转换数据成json形式
            var da = $.parseJSON(data);
            //var da = eval("("+data+")");

            //控制台打印数据
            //console.info(da[0].GRname);
            //console.info(da[0].GRjianjie);
            //console.info(da[0].GRImg);

            $("#GRName").attr("value", da[0].GRName);
            $("#GRJianJie").attr("value", da[0].GRJianJie);

        });
    }
    //修改信息
    function Update() {
        var GRName = $("#GRName").val();
        var GRJianJie = $("#GRJianJie").val();
        $.ajax({
            //访问路径
            url: "/Home/UpdateGRinfo",
            //请求values控制器中的post方法
            type: "Post",
            //参数
            data: { "GRName": GRName, "GRJianJie": GRJianJie },
            success: function (data) {
                if (data == true) {
                    alert("修改成功")
                    GRSelect();
                } else {
                    alert("修改失败")
                }

            }
        })
    }

    //修改头像
    function uploadImg() {
        var formData = new FormData();
        formData.append("file", $("#fileimg")[0].files[0]);
        $.ajax({
            url: "/Home/UpdateGRimg",
            type: 'POST',
            data: formData,
            // 告诉jQuery不要去处理发送的数据
            processData: false,
            // 告诉equerry不要去设置Content-Type请求头
            contentType: false,
            beforeSend: function () {//发送之前
                console.log("正在进行，请稍候");
            },
            success: function (data) {
                if (data == true) {
                    alert("修改成功")
                    GRSelect();
                } else {
                    alert("修改失败")
                }

            }
        });
    }

    //显示评论列表
    function PingLun(id) {
        //console.log(id);
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/PLSelect',
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            data: { "id": id },
            success: function (data) {
                //请求成功函数内容
                console.log(data);
                var group = $.parseJSON(data);
                //拼接字符串
                var str = '';
                //对数据做遍历，拼接到页面显示
                for (var i = 0; i < group.length; i++) {
                    str +=
                        '<li>' +
                        '<span>' + group[i].name + '&nbsp;:</span><span>' + group[i].plnr + '</span>' +
                        '</li>';
                }
                //放入页面的容器显示
                $('#xiangshipl #' + id).html(str);
            },
            error: function (jqxhr) {
                //请求失败函数内容
            }
        });
    }


    //好友分类显示
    function HaoYouFLSel() {
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/FriendFL',
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            success: function (data) {
                //请求成功函数内容
                /*console.log(data);*/
                var group = $.parseJSON(data);
                //拼接字符串
                var str = '';
                //对数据做遍历，拼接到页面显示
                for (var i = 0; i < group.length; i++) {
                    str +=
                        '<tr id="FLYiBu">' +
                        '<td><button class="FLName" value="' + group[i].flid + '" onclick=" HaoYouSel(this.value)"><span>' + group[i].flName + '</span></button></td>' +
                        '<td><button class="FLName" value="' + group[i].flid + '" onclick=" DelFL(this.value)"><span>删除</span></button></td>' +
                        '</tr>';
                }
                //放入页面的容器显示
                $('#FL-XianShi #FL-XianShi-tb').html(str);
            },
            error: function (jqxhr) {
                //请求失败函数内容
            }
        });
    }

    //好友显示
    function HaoYouSel(id) {
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/FriendSel',
            data: { "id": id },
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            success: function (jsonString) {
                //请求成功函数内容
                var data = JSON.parse(jsonString);
                var FenLei = data.FenLei;
                var group = data.geinfo;
                console.log(group);
                console.log(FenLei);
                //拼接字符串
                var str = '';
                var flb = "";

                for (var p = 0; p < FenLei.length; p++) {
                    flb +=
                        '<option value="' + FenLei[p].flid + '">' + FenLei[p].flName + '</option>';
                }

                //对数据做遍历，拼接到页面显示
                for (var i = 0; i < group.length; i++) {
                    str +=
                        '<tr id="Updatetr" >' +
                        '<td><img src="/TouXiang/' + group[i].img + '" alt=""></td>' +
                        '<td><span>' + group[i].name + '</span></td>' +
                        '<td>' +
                        '<select name="" id="' + group[i].WBID + '" style="background-color: transparent;">' +
                        flb +
                        '</select>' +
                        '</td>' +
                        '<td>' +
                        '<button id="' + group[i].WBID + '" class="FLName" value="' + group[i].gzid + '" onclick=" UpdateHaoYou(this.id,this.value)">修改</button>' +
                        '</td>' +
                        '<td>' +
                        '<button id="sanchu" class="FLName" value="' + group[i].gzid + '" onclick=" DelHaoYou(this.value)">删除</button>' +
                        '</td>' +
                        '<td>' +
                        '<a href="/Home/FriendsIndex/?WBID=' + group[i].WBID + '"><i class="iconfont icon-yonghu"></i></a>' +
                        '</td>' +
                        '</tr>';
                }
                //放入页面的容器显示
                $('#FZHY-tb').html(str);
            },
            error: function (jqxhr) {
                //请求失败函数内容
            }
        });
    }

    //好友全部显示
    function HaoYouQB() {
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/FriendSelQB',
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            success: function (jsonString) {
                //请求成功函数内容
                var data = JSON.parse(jsonString);
                var FenLei = data.FenLei;
                var group = data.geinfo;
                console.log(group);
                console.log(FenLei);
                //拼接字符串
                var str = '';
                var flb = "";

                for (var p = 0; p < FenLei.length; p++) {
                    flb +=
                        '<option value="' + FenLei[p].flid + '">' + FenLei[p].flName + '</option>';
                }

                //对数据做遍历，拼接到页面显示
                for (var i = 0; i < group.length; i++) {
                    str +=
                        '<tr id="Updatetr" >' +
                        '<td><img src="/TouXiang/' + group[i].img + '" alt=""></td>' +
                        '<td><span>' + group[i].name + '</span></td>' +
                        '<td>' +
                        '<select name="" id="' + group[i].WBID + '" style="background-color: transparent;">' +
                        flb +
                        '</select>' +
                        '</td>' +
                        '<td>' +
                        '<button id="' + group[i].WBID + '" class="FLName" value="' + group[i].gzid + '" onclick=" UpdateHaoYou(this.id,this.value)">修改</button>' +
                        '</td>' +
                        '<td>' +
                        '<button id="sanchu" class="FLName" value="' + group[i].gzid + '" onclick=" DelHaoYou(this.value)">删除</button>' +
                        '</td>' +
                        '<td>' +
                        '<a href="/Home/FriendsIndex/?WBID=' + group[i].WBID + '"><i class="iconfont icon-yonghu"></i></a>' +
                        '</td>' +
                        '</tr>';
                }
                //放入页面的容器显示
                $('#FZHY-tb').html(str);
            },
            error: function (jqxhr) {
                //请求失败函数内容
            }
        });
    }
    //显示评论列表
    function PingLun(id) {
        //console.log(id);
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/PLSelect',
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            data: { "id": id },
            success: function (data) {
                //请求成功函数内容
                console.log(data);
                var group = $.parseJSON(data);
                //拼接字符串
                var str = '';
                //对数据做遍历，拼接到页面显示
                for (var i = 0; i < group.length; i++) {
                    str +=
                        '<li>' +
                        '<span>' + group[i].name + '&nbsp;:</span><span>' + group[i].plnr + '</span>' +
                        '</li>';
                }
                //放入页面的容器显示
                $('#xianshipl_' + id).html(str);
            },
            error: function (jqxhr) {
                //请求失败函数内容
            }
        });
    }

    //增加分类
    function AddFL(pid) {
        var addName = $('#addFltxt').val();
        //console.log(addName);
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/AddFLtable',
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            data: { "addName": addName },
            success: function (data) {
                if (data == true) {
                    alert("增加成功");
                    HaoYouFLSel();
                } else {
                    alert("增加失败");
                }
            },
            error: function (jqxhr) {
                //请求失败函数内容
                alert("增加失败");
            }
        });
    }

    //增加评论
    function AddPL(pid) {
        var addtxt = $('#zengjiapl_' + pid).val();
        console.log(addtxt);
        $.ajax({
            //请求方式
            type: 'post',
            //发送请求的地址
            url: '/Home/ADDPL',
            //服务器返回的数据类型
            datatype: 'json',
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            data: { "PID": pid, "addtxt": addtxt },
            success: function (data) {
                if (data == true) {
                    alert("增加成功");
                } else {
                    alert("增加失败");
                }
            },
            error: function (jqxhr) {
                //请求失败函数内容
                alert("增加失败");
            }
        });
    }

    //删除分类
    function DelFL(id) {
        $.ajax({
            //访问路径
            url: "/Home/DelFLtable",
            //请求values控制器中的post方法
            type: "Post",
            //参数
            data: { "id": id },
            success: function (data) {
                if (data == true) {
                    alert("删除成功")
                    HaoYouFLSel();
                    HaoYouQB();
                } else {
                    alert("删除失败")
                }

            }
        })
    }

    //修改好友
    function UpdateHaoYou(WBID, gzid) {
        var fltxt = $("#Updatetr #" + WBID).val();
        $.ajax({
            //访问路径
            url: "/Home/UpdateHaoYou",
            //请求values控制器中的post方法
            type: "Post",
            //参数
            data: { "gzid": gzid, "fltxt": fltxt },
            success: function (data) {
                if (data == true) {
                    alert("修改成功")
                    HaoYouQB();
                } else {
                    alert("修改失败")
                }

            }
        });
    }

    //删除好友
    function DelHaoYou(gzid) {
        $.ajax({
            //访问路径
            url: "/Home/Deltable",
            //请求values控制器中的post方法
            type: "Post",
            //参数
            data: { "gzid": gzid },
            success: function (data) {
                if (data == true) {
                    alert("删除成功")
                    HaoYouQB();
                } else {
                    alert("删除失败")
                }

            }
        });
    }

</script>
<div class="Subpage">

    <!-- 主页背景区域 -->
    <div class="Subpage-Header" id="Subpage-Header">

    </div>

    <!-- 主页用户 -->
    <div class="Subpage-YongHu">
        <div id="Subpage-YongHu-img">
            <img src="~/TouXiang/@ViewBag.GRImg" alt="">
        </div>
        <div id="Subpage-YongHu-ShiJian">
            <span id="ShiJian"></span><br>
            <span id="ReQi"></span>
        </div>
    </div>

    <!-- 主页内容 -->
    <div class="Subpage-Conten">
        <!-- 菜单区域 -->
        <div class="Subpage-Conten-CaiDan">
            <!--侧栏页面设计-->
            <div id="mySidenav" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <ul>
                    <li></li>
                </ul>
                <details>
                    <summary>我的空间</summary>
                    <button onclick="DongTai()"><i class="iconfont icon-dongtai"></i>动态</button>
                    <button onclick="FaBu()"><i class="iconfont icon-bianjiwenzhang_huaban"></i>发布动态</button>
                </details>
                <button onclick="Xinxi()"><i class="iconfont icon-yonghu"></i>信息</button>
                <button onclick="HaoYou()"><i class="iconfont icon-31haoyou"></i>好友管理</button>
            </div>
            <span title="菜单" style="font-size:30px; cursor:pointer" onclick="openNav()">&#9776;</span>
        </div>
        <!-- 轮换区域 -->
        <div class="Subpage-Conten-LengHuanQu">
            <!-- 动态 -->
            <div class="Conten-LengHuanQu-DongTai" id="Conten-LengHuanQu-DongTai">

                @foreach (var item in ViewBag.Homelist)
                {
                    <div class="DongTai-FaBu">
                        <img id="touxiang" src="~/TouXiang/@item.img" alt="">
                        <p id="mzi"><span>@item.name</span><br><span>@item.jianjie</span></p>
                        <div class="DongTai-FaBu-NeiRong">

                            <p id="DongTai-FaBu-NeiRong">@item.WenBen</p>
                            @if (@item.TuPian != null)
                            {
                                <img id="tupian" src="~/TuPian/@item.TuPian" alt="" style="width:100%;height:auto; margin:0px;">
                            }
                            @if (@item.ShiPian != null)
                            {
                                <video id="shipian" controls="controls">
                                    <source src="~/ShiPian/@item.ShiPian" type="video/mp4" />
                                </video>
                            }

                        </div>
                        <div id="DongTai-FaBu-PianLun">
                            <button id="aixin"><i class="iconfont icon-aixin"></i>@item.XiHuan</button>
                            <button class="check-box" id="pinglun">
                                <i class="iconfont icon-pinglun"></i>评论
                            </button>
                            <button id="zhuanfa"><i class="iconfont icon-zhuanfa"></i>@item.ZhuanFa</button>
                            <button id="aixin" value="@item.PID" onclick="Del(this.value)"><i class="iconfont icon-shanchu"></i>删除</button>
                            <button type="button" value="@item.PID" onclick="PingLun(this.value)"><i class="iconfont icon-shuaxin"></i>刷新</button>
                            <p id="pid" style="visibility:hidden;">@item.PID</p>
                        </div>
                        <div class="pinglunqu">
                            <div id="shurupl">
                                <input type="text" name="TjPl" id="zengjiapl_@item.PID" placeholder="输入评论..." required>
                                <button type="button" value="@item.PID" onclick=" AddPL(this.value)">评论</button>
                            </div>
                            <div id="xianshipl">
                                <ul id="xianshipl_@item.PID">
                                </ul>
                            </div>
                        </div>
                    </div>
                }

            </div>
            <!-- 发布动态 -->
            <div class="Conten-LengHuanQu-FuBu" id="Conten-LengHuanQu-FuBu">

                <form action="/Home/HomeAdd" method="post" enctype="multipart/form-data">
                    <div class="LengHuanQu-FuBu-NeiRong">
                        <h2>发布动态</h2>
                        <hr>
                        <div class="FaBu-fabiao">

                            <textarea name="shurukuang" id="shurukuang" cols="30" rows="10" placeholder="请输入..."></textarea>
                            <div id="yulan">
                                <img id="picimg" src="" alt="" style="width:440px;height:auto;">
                                <video id="spvieo" src="" controls="controls" style="width:750px;height:auto;"></video>
                                <!-- if判断 -->
                            </div>
                            <div id="Btn">
                                <input type="file" name="file1" id="file1" value="" />
                                <input type="button" onclick="QingKong()" name="name" value="清空" />
                                <input type="submit" id="FaBu-fabiao" name="name" value="发表" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 个人信息 -->
            <div class="Conten-LengHuanQu-Xinxi" id="Conten-LengHuanQu-Xinxi">
                <div class="Conten-LengHuanQu-Xinxi-poticon">
                    <form action="/Home/UpdateGRimg" method="post" enctype="multipart/form-data">
                        <div id="GGTuPian" style="height:200px;">
                            <img class="xgTouXiang" id="UpdataImg" src="~/TouXiang/@ViewBag.GRImg" alt="" style="margin-top:50px;"><br />
                            <label id="xgTouXiang">选择图片<input type="file" id="fileimg" style="display:none;" name="name" /></label>
                            <input class="txyangshi" type="button" id="UpdataImg" onclick="uploadImg()" value="更换头像">
                        </div>
                    </form>
                    <div id="XianXi" style="margin-top:50px; height:300px;">
                        <span>名字：</span><input type="text" id="GRName" value="" /><br />

                        <span>简介：</span><input type="text" id="GRJianJie" value="" /><br>
                        <p id="gerenWBID" style="display:none;">@ViewBag.WBID</p>
                        <button type="submit" id="UpdataBtn">保存更改</button>
                    </div>
                </div>
            </div>
            <!-- 好友管理 -->
            <div class="Conten-LengHuanQu-HaoYou" id="Conten-LengHuanQu-HaoYou">
                <div class="FenZhu">
                    <div class="inputBox">
                        <input required type="text" id="addFltxt">
                        <span>Add friends</span>
                        <i></i>
                        <button id="AddFzBtn" type="button" onclick="AddFL()">添加</button>
                    </div>
                    <table id="FL-XianShi" rules=none>
                        <tr id="FLTH">
                            <th>类别</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td><button class="FLName" onclick="HaoYouQB()"><span>全部</span></button></td>
                            <td><button class="FLName" value="" onclick="HaoYouQB()"><span>全部</span></button></td>
                        </tr>
                        <tbody id="FL-XianShi-tb"> 

                        </tbody>
                    </table>
                </div>
                <div class="FZHaoYou">
                    <table id="FZHY" rules=none>
                        <tr id="FLTH">
                            <th>头像</th>
                            <th>用户</th>
                            <th>类别</th>
                            <th>分组修改</th>
                            <th>删除好友</th>
                            <th>主页</th>
                        </tr>
                        <tbody id="FZHY-tb">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>


